<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    //float u_j1 = 360.0;
    //float u_j2 = 70.0;
    uniform float u_j1;
    uniform float u_j2;

    float pi = radians(180.0);

    float getCosJ(){
        vec2 c = vec2(gl_PointCoord);
        vec2 mo = c - vec2(0.5,0.5);
        float l = mo.x;
        float x = distance(c,vec2(0.5,0.5));
        float cosj = l / x;
        return cosj;
    }

    bool getAngle(float j1,float j2,float t){
        float cosj = getCosJ() * t;
        float a = 0.0;
        float b = 0.0;
        if(t > 0.0){
            if(j1 < j2){
                a = cos(min(j1, 180.0) * pi / 180.0);
                b = cos(min(j2, 180.0) * pi / 180.0);
                if(a >= cosj && cosj >= b){
                    return true;
                }
            }else{
                //逆开角(先不算)
                a = cos(min(j2, 180.0) * pi / 180.0);
                b = cos(min(j1, 180.0) * pi / 180.0);
                if(!(a >= cosj && cosj >= b)){
                    return true;
                }
            }
        }else{
            //负角
            if(j1 < j2){
                a = cos(max(j1 - 180.0, 0.0) * pi / 180.0);
                b = cos(max(min(j2 - 180.0, 180.0), 0.0) * pi / 180.0);
                if(a >= cosj && cosj >= b){
                    return true;
                }
            }else{
                //逆开角(先不算)
                a = cos(max(j2 - 180.0, 0.0) * pi / 180.0);
                b = cos(max(min(j1 - 180.0, 180.0), 0.0) * pi / 180.0);
                if(!(a >= cosj && cosj >= b)){
                    return true;
                }
            }
        }

        return false;
    }

    //画有弧度的头部
    // j:从[0.5,0.5]的角度 posiRadius:弧线半径 radius:画的圆的半径 
    bool getAngular(float j, float posiRadius, float radius){
        float x = posiRadius;
        float l = x * cos(j * pi / 180.0);
        float d = x * sin((360.0 - j) * pi / 180.0);

        vec2 c = vec2(l + 0.5, d + 0.5);
        float dist = distance(gl_PointCoord, c);
        if(dist <= radius){
            return true;
        }
        return false;
    }

    float line_W_S = 0.5;
    float line_W_E = 0.45;
    float line_W_Diff = line_W_S - line_W_E;


    void main(){
        //只渲染指定角度的
 
        vec4 color = vec4(1,1,1,1);
        bool s = false;

        if(u_j1 == u_j2){
            return;
        }

        //计算弧线
        if(gl_PointCoord.y <= 0.5){
            s = getAngle(u_j1, u_j2, 1.0);
        }else{
            s = getAngle(u_j1, u_j2,-1.0);
        }
        if(s == true){
            float dist = distance(gl_PointCoord, vec2(0.5,0.5));
            if(!(dist <= line_W_S && dist >= line_W_E)){
                s = false;
            }
        }

        //计算圆角
        if(s == false){
            s = getAngular(u_j1, line_W_S - line_W_Diff/2.0,line_W_Diff/2.0);
        }
        if(s == false){
            s = getAngular(u_j2, line_W_S - line_W_Diff/2.0,line_W_Diff/2.0);
        }


        if(s == true){
            gl_FragColor = color;
        }
        
    }
</script>
<script type="module">


    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'
    import Control from '../js/Control.js'

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion



    const scene = new Scene({ gl: gl });
    scene.regProgram('color', {
        program: CreateProgram(gl,
            document.querySelector('#ColorVertexShader').innerText,
            document.querySelector('#ColorFragmentShader').innerText),
        attribs: ['a_Position'],
        uniforms: ['u_j1', 'u_j2', 'u_PointSize', 'u_Color']
    })





    scene.add(create(new Vector3(0, 0, 0), [1, 1, 1, 1]));
    scene.draw();



    let set = 180;
    (function ani() {

        set += 1;

        const obj = scene.children[0];

        obj.setUniform('u_j1', { value: (set - 180) % 360 });
        obj.setUniform('u_j2', { value: set % 360 });

        console.log(set)

        scene.draw();
        requestAnimationFrame(ani);
    })();



    function create(node, color) {
        return new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': { size: 2, array: new Float32Array([node.x, node.y]) },
                },
            }),
            mat: new Mat({
                program: 'color',
                mode: ['POINTS'],
                data: {
                    'u_PointSize': { type: 'uniform1f', value: 500 },
                    'u_Color': { type: 'uniform4fv', value: color },
                    'u_j1': { type: 'uniform1f', value: 0 },
                    'u_j2': { type: 'uniform1f', value: 0 },
                },
            }),
        });
    }
</script>

</html>